<template>
  <div class="recharge">
    <h4>充值情况统计</h4>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <div class="grud_title">本月充值次数</div>
          <div class="grud_data">{{ rechargeList.rechargeCount }}</div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <div class="grud_title">本月充值金额</div>
          <!-- {{'0000' + rechargeList.rechargeAmount}} -->
          <div class="grud_data" :title="rechargeList.rechargeAmount">
            {{
              String(rechargeList.rechargeAmount).replace(
                /\B(?=(\d{3})+(?!\d))/g,
                ","
              )
            }}
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <div class="grud_title">当天充值次数</div>
          <div class="grud_data">
            {{ rechargeList.dayRechargeCount }}
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <div class="grud_title">当天充值金额</div>
          <div class="grud_data">
            {{
              String(rechargeList.dayRechargeAmount).replace(
                /\B(?=(\d{3})+(?!\d))/g,
                ","
              )
            }}

            <!-- {{rechargeList.dayRechargeAmount | getM}} -->
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <div class="grud_title">最大充值金额</div>
          <div class="grud_data">
            {{
              String(rechargeList.maxAmount).replace(
                /\B(?=(\d{3})+(?!\d))/g,
                ","
              )
            }}
            <!-- {{rechargeList.maxAmount | getM}} -->
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <div class="grud_title">最小充值金额</div>
          <div class="grud_data">
            {{
              String(rechargeList.minAmount).replace(
                /\B(?=(\d{3})+(?!\d))/g,
                ","
              )
            }}
            <!-- {{rechargeList.minAmount | getM}} -->
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <div class="grid-time">
        最近充值时间:<span>{{ rechargeList.latelyRechargeTime }}</span>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 充值统计数据
      rechargeList: {},
    };
  },
  filters: {
    getM(val) {
      if (Number(val) >= 10000) {
        return (Number(val) / 10000).toFixed(3) + "万";
      } else {
        return val + "元";
      }
    },
  },
  created() {
    this.getRecharge();
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid;
      },
    },
  },
  methods: {
    // 获取充值信息
    getRecharge() {
      this.$http({
        url: this.$http.adornUrl("/info/recharge/statistics"),
        method: "post",
        data: this.$http.adornData({
          messageContent: this.changeschoolid,
        }),
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          console.log(data);
          this.rechargeList = data.messageContent;
        } else {
          this.$message.error(data.errorMessage);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.recharge {
  overflow: hidden;
  h4 {
    margin: 0;
    padding-top: 0.8vh;
    padding-left: 0.8vw;
  }
  .grid-time {
    box-shadow: 0 0 10px #ddd;
    // background-color:#f5f5f5;
    height: 4vh;
    padding-left: 1vw;
    line-height: 4vh;
    border-radius: 4px;
    span {
      color: #ccc;
      font-size: 12px;
      margin-left: 1vw;
    }
  }
}
.el-row {
  padding: 1vh;
  padding-top: 0;
  font-weight: 1000;
  &:first-child {
    margin-top: 0;
  }
}
.el-col {
  border-radius: 4px;
  margin-top: 1vh;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  display: flex;
  box-shadow: 0 0 10px #ddd;
  //   background-color:#f5f5f5;
  height: 9vh;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  .grud_data {
    font-size: 1.5vh;
    color: #17b3a3;
  }
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>